<template>
  <div>
    <div class="outDiv">
      <scroller lock-x>
        <div>
       
          <headerBack v-show="!hideHeader"></headerBack>
          <div class="main">
            <div class="title">
              <h3>{{ majorName }}</h3>
              <p>{{ typeName + ' / ' + catalogName }}</p>
              <p>专业代码 {{ majorCode }}</p>
            </div>
            <div class="content">
              <ul class="tabList">
                <li :class="['tabItem', tabView == 'acquaintance' ? 'tabAction' : '']" @click="handleChoTabItem('acquaintance')">专业认识</li>
                <li :class="['tabItem', tabView == 'college' ? 'tabAction' : '']" @click="handleChoTabItem('college')">录取分析</li>
                <li :class="['tabItem', tabView == 'work' ? 'tabAction' : '']" @click="handleChoTabItem('work')">就业情况</li>
              </ul>
              <div style="padding: 0.32rem;">
                <keep-alive>		
                  <component v-bind:is="tabView" :majorData="majorData"></component>	
                </keep-alive>
              </div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
  </div>  
</template>

<script>
import headerBack from '~/components/headerBack'
import { getmajorDetail } from '~/api/repository'
import Acquaintance from './acquaintance'
import College from './college'
import Work from './work'
import { Tab, TabItem } from 'vux'
import ls from 'store2';
export default {
  components: {
    headerBack,
    Tab,
    TabItem,
    Acquaintance,
    College,
    Work
  },
  created() {
    if(this.commonJs.GetUrlParam("sx_token")){
      ls.set("tokensyxk",this.commonJs.GetUrlParam("sx_token"))
      const data = JSON.parse(this.commonJs.GetUrlParam("data"))
      const type = data.code
      ls.set('majorDetailQueryData', data)
      this.getDetailByName(type);
    } else {
      const data = JSON.parse(this.$route.query.type)
      const type = data.code;
      // this.backTypeId = data.typeId + '';
      ls.set('majorDetailQueryData', data)
      this.getDetail(type);
    }
    if (this.commonJs.GetUrlParam('mini_token')) {
      this.hideHeader = true      
    }
  },			
  data() {
    return {
  
      majorCode: '', // 专业代码
      majorName: '', // 专业名称
      majorData: {}, // 专业详情
      typeName: '',
      catalogName: '',
      hideHeader: false,
      // backTypeId: '',
      tabView: 'acquaintance', // tab选择   acquaintance--初识  college--高考  work--就业
    }
  },
  mounted(){
   
  },
  methods: {
    // 获取专业详情
    getDetail(typeId) {
      this.$loading('open');
      getmajorDetail({ major_code: typeId }).then(res => {
        console.log('res', res)
        if (res.code == 200) {
          this.majorData = res.data;
          this.majorCode = this.majorData.major_code;
          this.majorName = this.majorData.major_name;
          this.typeName = this.majorData.type_name;
          this.catalogName = this.majorData.catalog_name;
        }
          this.$visit("Major/"+this.majorName)
      }).catch(err => {
        this.$vux.toast.text(err.data.description)
        window.history.go(-1);
      }).finally(() => {
        this.$hideLoading();
      })
    },
    // 获取专业详情
    getDetailByName(typeId) {
      this.$loading('open');
      getmajorDetail({ major: name }).then(res => {
        if (res.code == 200) {
          this.majorData = res.data;
          this.majorCode = this.majorData.major_code;
          this.majorName = this.majorData.major_name;
          this.typeName = this.majorData.type_name;
          this.catalogName = this.majorData.catalog_name;
        }
      }).finally(() => {
        this.$hideLoading();
      })
    },
    // 切换Tab页 
    handleChoTabItem(type) {
      this.tabView = type;
    },
  },
}
</script>

<style lang="less" scoped>
  .outDiv {
    width: 100%;
    height: 100vh;
    .main {
      .title {
        padding: 0.32rem;
        background: #FFF;
        margin-bottom: 0.24rem;
        h3 {
          font-size: 0.36rem;
          font-weight: bold;
          color: #222;
          line-height: 0.57rem;
          margin-bottom: 0.32rem;
        }
        p {
          margin-top: 0.16rem;
          color: #999;
          font-size: 0.24rem;
        }
      }
      .content {
        background: #FFF;
        padding-bottom: 0.3rem;
        .tabList {
          padding: 0.35rem 0;
          list-style: none;
          padding-left: 0;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          border-bottom: 1px solid #E5E8ED;
          .tabItem {
            padding: 0 0.32rem;
            border-right: 1px solid #E5E8ED;
            color: #999;
            font-size: 0.3rem;
            line-height: 0.4rem;
          }
          .tabItem:last-child {
            border-right: none;
          }
          .tabAction {
            color: @mainColor;
            font-weight: bold;
          }
        }
        .modelArea {
          padding: 0.32rem;
        }
      }
    }
  }
</style>
